<template>
	<div class="channel" v-load-more="loaderMore">
		<div class="sv-card" v-for="item in res_data" :key="item.aid">
			<router-link tag="div" :to="`/player/${item.aid}`">
				<div class="load-img">
					<div class="img">
						<img v-lazy.container="imgBaseUrl+item.pic" />
					</div>
					<div class="times">{{ item.minute }}</div>
				</div>
				<div :class="`title ellipsis icon-from icon-from-${item.pub_platform}`">{{item.title}}</div>
			</router-link>
			<div class="info">
				<div class="user">
					<span class="avatar">
                        <svg class="icon-svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mine"></use>
                        </svg>
					</span>{{item.author}}
				</div>
				<div class="number">
					<div class="favor" @click="storeFn(item)">
						<svg class="icon-svg" :fill="item.store!=0&&'#f86254'">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="item.store==0?'#favor':'#favor-active'"></use>
						</svg>
						{{item.store_num}}
					</div>

					<div class="appreciate" @click="goodFn(item)">
						<svg class="icon-svg" :fill="item.good!=0&&'#f86254'">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="item.good==0?'#appreciate':'#appreciate-active'"></use>
						</svg>
						{{item.good_num}}
					</div>

					<div class="share">
						<svg class="icon-svg">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share"></use>
						</svg>
					</div>
				</div>
			</div>
		</div>
		<p v-if="showLoading" class="page-infinite-loading">
			<mt-spinner type="snake"></mt-spinner>加载中...
		</p>
		<p v-if="touchend" class="no-more">
			没有更多了
		</p>
	</div>
</template>
<script>
	import {Toast} from 'mint-ui'
	import {billboard,storefrontAdd,updategood, imgBaseUrl} from '@/api'
	import {setStore, getStore, utilStore, utilGood} from '@/config/mUtils'
    import {loadMore} from '@/components/common/mixin'
	import { mapState, mapMutations } from 'vuex'
	export default {
		data () {
			return {
				imgBaseUrl,
				res_data: [],
				page: 1,
				preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
				showLoading: false,
				touchend: false, //没有更多数据
			}
		},
		mounted() {
			this.getResData();
		},
        mixins: [loadMore],
		watch: {
			'$route' (to, from) {
				// 对路由变化作出响应...
				this.page = 1;
				this.getResData();
			}
		},
		computed: {
			...mapState([
				'userInfo',
			]),
		},
		methods: {
			...mapMutations([
				'DIALOG_LOGIN',
			]),
			async getResData(){
				//获取数据
				this.showLoading = true;
				this.menu_id = this.$route.params.menu_id;
				let para = {
					menu_id: this.menu_id,
					page: this.page,
					user_id: this.userInfo?this.userInfo.user_id:'',
				};
				let res = await billboard(para);
				let res_data = res.data
				for(let i =0;i<res_data.length; i++){
					res_data[i].good = 0;
					res_data[i].goodcan = true;
				}
				this.hideLoading();
				this.res_data = [...res_data];
				//当获取数据小于10，说明没有更多数据，不需要再次请求数据
				if (res_data.length < 10) {
					this.touchend = true;
					return
				}
				this.preventRepeatReuqest = false;
				//开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
				// showBack(status => {
				// 	this.showBackStatus = status;
				// });
			},
			//到达底部加载更多数据
			async loaderMore(){
				if (this.touchend) {
					return
				}
				//防止重复请求
				if (this.preventRepeatReuqest) {
					return 
				}
				this.showLoading = true;
				this.preventRepeatReuqest = true;

				//数据的定位加10位
				this.page++;
				let para = {
					menu_id: this.menu_id,
					page: this.page,
					user_id: this.userInfo?this.userInfo.user_id:'',
				};
				let res = await billboard(para);
				let res_data = res.data
				for(let i =0;i<res_data.length; i++){
					res_data[i].good = 0;
					res_data[i].goodcan = true;
				}
				this.hideLoading();
				this.res_data = [...this.res_data, ...res_data];

				//当获取数据小于10，说明没有更多数据，不需要再次请求数据
				if (res_data.length < 10) {
					this.touchend = true;
					return
				}
				this.preventRepeatReuqest = false;
			},
			//开发环境与编译环境loading隐藏方式不同
			hideLoading(){
				this.showLoading = false;
			},
			// 收藏 
			storeFn(item){
				utilStore(item, this, 'res_data', storefrontAdd);
			},
			goodFn(item){
				utilGood(item, this, 'res_data', updategood);
			},
			
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	.channel {
		padding-top: 1.5rem;
	}
	.sv-card {
		background: #fff;
		margin: 0.4rem 0;
		.load-img {
			position: relative;
			height: 0;
			padding-bottom: 56.25%;
			overflow: hidden;
			.times {
				position: absolute;
				right: 0.25rem;
				bottom: 0.25rem;
				font-size: 0.5rem;
				background: rgba(0,0,0,.3);
				border-radius: 4px;
				padding: 0 5px;
				color:#fff;
			}
		}
		.title {
			font-size: 0.7rem;
			margin: 0.25rem;
		}
		.info {
			font-size: 0.6rem;
			line-height: 1rem;
			padding:0 0.25rem 0.25rem 0.25rem;
			display: flex;
			justify-content: space-between;
			.user {
				display: flex;
				.avatar {
					width: 0.7rem;
					height: 0.7rem;
					margin-right: 0.25rem;
				}
				.icon-svg {
					width: 100%; 
					height: 100%;
					vertical-align: -.125rem;
				}
			}
			.number {
				display: flex;
				div {
					margin: 0 0.25rem;
				}
				.icon-svg {
					width: 0.7rem; 
					height: 0.7rem;
					vertical-align: -.125rem;
				}
			}
		}
	}
</style>
